<script>

export default {
  name:"Tab",
  data(){
    return{

    }
  },
  mounted(){
    this.$parent.panes.push(this);
  },
  computed:{
    active(){
      return this.$parent.value == this.index;
    }
  },
  props:{
    label:{
      type:String,
      default:"tab"
    },
    index:{
      type:[String,Number],
      required:true
    }
  },
  methods:{
    handlerClick(event){
      this.$parent.onChanges(this.index)
    }
  },
  render(){

    let tab = this.$slots.label || this.label;

    let classNames = {
      tab:true,
      active:this.active
    }

    return(
      <li class={classNames} onClick={this.handlerClick}>
        {tab}
      </li>
    )
  }
}

</script>

<style lang="css" scoped>

.tab{
  text-align: center;
  flex: 1;
  list-style:none;
  line-height:1.2rem;
  margin-right:0.6rem;
  position:relative;
  bottom:-2px;
  cursor:pointer;
}

.tab.active{
  /* border-bottom:2px solid blue; */
  color: red;
}

.tab.last-child{
  margin-right:0;
}

</style>
